<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="login-wrap">
    <div class="login-html">
        <!--<img src="img/logo.png">-->
        <h1 style="color: white;font-size: 60px;font-family: 'Adobe 楷体 Std R';text-align: center;padding-bottom:10px; ">
            咸鱼网上商城</h1>
        <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>
        <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>
        <div class="login-form">
            <!--/*@thymesVar id="user" type="com.zxm.ssm.entity.User"*/-->
            <form th:action="@{/user/login}" method="post" th:object="${user}">
                <ul th:if="${#fields.hasErrors('global')}">
                    <li th:each="err : ${#fields.errors('global')}" th:text="${err}"></li>
                </ul>
                <div class="sign-in-htm">
                    <div class="group">
                        <label for="inputUsername" class="label">用户名</label>
                        <input id="inputUsername"
                               name="username"
                               th:classappend="${#fields.hasErrors('username')}? 'is-invalid'"
                               type="text"
                               th:value="*{username}"
                               class="input">
                        <div class="invalid-feedback">
                            <ul style="margin: 0px;">
                                <li th:each="err : ${#fields.errors('username')}" th:text="${err}"/>
                            </ul>
                        </div>
                    </div>
                    <div class="group">
                        <label for="inputPass" class="label">密码</label>
                        <input id="inputPass"
                               th:classappend="${#fields.hasErrors('password')}? 'is-invalid'"
                               th:value="*{password}"
                               type="password"
                               name="password"
                               class="input">
                        <div class="invalid-feedback">
                            <ul style="margin: 0px;">
                                <li th:each="err : ${#fields.errors('password')}" th:text="${err}"/>
                            </ul>
                        </div>
                    </div>
                    <div class="group">
                        <button type="submit" class="button">登录</button>
                    </div>
                    <div class="group" style="text-align: center">
                        <label>咸鱼商城值得信赖！</label>
                    </div>
                    <div class="hr"></div>
                </div>
            </form>
            <!--/*@thymesVar id="registerUser" type="com.zxm.ssm.entity.RegisterUser"*/-->
            <form th:action="@{/user/register}" method="post">
                <div class="sign-up-htm">
                    <div class="group">
                        <label for="name" class="label">用户名</label>
                        <input id="name" type="text" class="input" name="name">
                    </div>
                    <div class="group">
                        <label for="inputPwd" class="label">密码</label>
                        <input id="inputPwd" type="password" name="newPassword" class="input">
                    </div>
                    <div class="group">
                        <label for="inputRepeatPwd" class="label">确认密码</label>
                        <input id="inputRepeatPwd" type="repeatPassword" name="repeatPassword" class="input">
                    </div>
                    <div class="group">
                        <button type="submit" class="button">注册</button>
                    </div>
                    <div class="group" style="text-align: center">
                        <label>咸鱼商城值得信赖！</label>
                    </div>
                    <div class="hr"></div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<style>
    body {
        margin: 0;
        color: #6a6f8c;
        background: #c8c8c8;
        font: 600 16px/18px 'Open Sans', sans-serif;
    }

    *, :after, :before {
        box-sizing: border-box
    }

    a {
        color: inherit;
        text-decoration: none
    }

    .login-wrap {
        width: 100%;
        margin: auto;
        max-width: 525px;
        min-height: 670px;
        position: relative;
        background: url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
    }

    .login-html {
        width: 100%;
        height: 100%;
        position: absolute;
        padding: 90px 70px 50px 70px;
        background: rgba(40, 57, 101, .9);
    }

    .login-html .sign-in-htm,
    .login-html .sign-up-htm {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        transform: rotateY(180deg);
        backface-visibility: hidden;
        transition: all .4s linear;
    }

    .login-html .sign-in,
    .login-html .sign-up,
    .login-form .group .check {
        display: none;
    }

    .login-html .tab,
    .login-form .group .label,
    .login-form .group .button {
        text-transform: uppercase;
    }

    .login-html .tab {
        font-size: 22px;
        margin-right: 15px;
        padding-bottom: 5px;
        margin: 0 15px 10px 0;
        display: inline-block;
        border-bottom: 2px solid transparent;
    }

    .login-html .sign-in:checked + .tab,
    .login-html .sign-up:checked + .tab {
        color: #fff;
        border-color: #1161ee;
    }

    .login-form {
        min-height: 345px;
        position: relative;
        perspective: 1000px;
        transform-style: preserve-3d;
    }

    .login-form .group {
        margin-bottom: 15px;
    }

    .login-form .group .label,
    .login-form .group .input,
    .login-form .group .button {
        width: 100%;
        color: #fff;
        display: block;
    }

    .login-form .group .input,
    .login-form .group .button {
        border: none;
        padding: 15px 20px;
        border-radius: 25px;
        background: rgba(255, 255, 255, .1);
    }

    .login-form .group input[data-type="password"] {
        text-security: circle;
        -webkit-text-security: circle;
    }

    .login-form .group .label {
        color: #aaa;
        font-size: 12px;
    }

    .login-form .group .button {
        background: #1161ee;
    }

    .login-form .group label .icon {
        width: 15px;
        height: 15px;
        border-radius: 2px;
        position: relative;
        display: inline-block;
        background: rgba(255, 255, 255, .1);
    }

    .login-form .group label .icon:before,
    .login-form .group label .icon:after {
        content: '';
        width: 10px;
        height: 2px;
        background: #fff;
        position: absolute;
        transition: all .2s ease-in-out 0s;
    }

    .login-form .group label .icon:before {
        left: 3px;
        width: 5px;
        bottom: 6px;
        transform: scale(0) rotate(0);
    }

    .login-form .group label .icon:after {
        top: 6px;
        right: 0;
        transform: scale(0) rotate(0);
    }

    .login-form .group .check:checked + label {
        color: #fff;
    }

    .login-form .group .check:checked + label .icon {
        background: #1161ee;
    }

    .login-form .group .check:checked + label .icon:before {
        transform: scale(1) rotate(45deg);
    }

    .login-form .group .check:checked + label .icon:after {
        transform: scale(1) rotate(-45deg);
    }

    .login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm {
        transform: rotate(0);
    }

    .login-html .sign-up:checked + .tab + .login-form .sign-up-htm {
        transform: rotate(0);
    }

    .hr {
        height: 2px;
        margin: 60px 0 50px 0;
        background: rgba(255, 255, 255, .2);
    }

    .foot-lnk {
        text-align: center;
    }
</style>